<template>
  <div class="drag-container">
    <draggable
      v-for="(colItems, colIndex) in items"
      :key="colIndex"
      v-model="items[colIndex]"
      :group="{ name: 'items' }"
      class="drag-col"
      @end="onDrop"
      animation="100"
      easing="cubic-bezier(1, 0, 0, 1)"
      :scroll="true"
      :scroll-sensitivity="60"
      :scrollSpeed="20"
      ghost-class="ghost"
      :force-fallback="true"
    >
      <div v-for="item in colItems" :key="item.id" class="drag-item">
        {{ item.name }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import { generateRandomItem } from '../assets/utils';

export default {
  name: 'vuedragable',
  components: {
    draggable
  },
  data() {
    return {
      items: Array.from(
                { length: 3 },
                (_, i) => generateRandomItem(i, 5)
            ),
    }
  },
  methods: {
    onDrop(event) {
      this.items = this.items.filter(item => item.length > 0)
    }
  }
}
</script>

<style scoped>
.drag-container {
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 16px;
}

.drag-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.drag-item {
    word-break: break-all;
    background-color:antiquewhite;
    padding: 20px;
}

.ghost {
    opacity: 0.5;
}
</style>
